import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
// vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态
// 导入分类模块的store 
import FsStore from './module/fenleiStore'
import HomeStore from './module/homeStore'
export default new Vuex.Store({
  state: {// state  公共状态
    count: 0,  //管理 
    list: ["元旦", "春节", "情人节"],
    username: "刘德华",
    movies: "唐人街探案3",
    age: 18,
    flag: true
  },
  // mutations 同步改变state的函数
  mutations: {
    changeCount (state, num) { //改变state中的count的方法
      state.count += num
    },
    changeFlag (state, bool) {//改变state中的flag的方法
      state.flag = bool
    },
    changeMovies (state, mov) {//改变state中movies的方法
      state.movies = mov;
    }
  },
  getters: {//getters 相当于 vuex中对state的处理的计算属性
    // getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
    // myage (state) {
    //   return state.age * 2
    // },
    myage: state => state.age * 2,
    // mylist (state) {
    //   return state.list
    // },
    mylist: state => state.list,
    username: state => state.username,
    movies: state => state.movies
  },
  // actions  异步改变stateAction 类似于 mutation，不同在于：
  // Action 提交的是 mutations，而不是直接变更状态。
  // Action 可以包含任意异步操作。
  // dispatch来触发actions的函数
  actions: {
    // flagChangeActions (context, bool) {
    //   context.commit("changeFlag", bool)
    // },
    flagChangeActions ({ commit }, bool) {
      commit("changeFlag", bool)
    },
    moviesChangeActions ({ commit }, mov) {
      commit("changeMovies", mov)
    }
  },
  modules: { //模块化 vuex 
    FsStore,
    HomeStore
  }
});
